<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <h2 class="word-break">{{ projectForm.name }}</h2>
        </div>
      </template>
      
      <el-form v-model="projectForm">
        <el-row>
          <el-form-item label="项目编码：">
            <span class="word-break">{{ projectForm.number }}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="省、市、区（县）：">
              <span class="word-break">{{ projectForm.area }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目负责人：">
              <span class="word-break">{{ projectForm.leader }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目创建人：">
              <span class="word-break">{{ projectForm.founder }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型：">
              <span class="word-break">{{ projectForm.type }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目来源：">
              <span class="word-break">{{ projectForm.source }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目状态：">
              <span class="word-break">{{ projectForm.status }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目简介：">
              <span class="word-break">{{ projectForm.briefIntro }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-divider border-style="dashed"></el-divider>

    <el-table v-loading="loading" :data="dataList" :border="true" stripe>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="专题编码" align="center" prop="coding" />
      <el-table-column label="专题名称" align="center" prop="name" />
      <el-table-column label="专题代码" align="center" prop="code" />
      <el-table-column label="专题负责人" align="center" prop="studyDirector" />
      <el-table-column label="技术负责人" align="center" prop="technicalLeader" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button type="text" @click="goTreeDetailForm(row)">进入</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="page" v-model:limit="rows"
      @pagination="getList" />
  </div>
</template>
<script setup name="dataLoaderProject">
import { getById } from '@/api/projectManage/project'
import { getAll } from '@/api/projectManage/subject'

const router = useRouter()
const route = useRoute()
const data = reactive({
  projectForm: [],
  dataList: [],
  page: 1,
  rows: 10,
  total: 0,
  loading: false
})
const { projectForm, dataList, page, rows, total, loading } = toRefs(data)


const getProject = () => {
  getById(route.query.projectId).then(res => {
    projectForm.value = res.data
    projectForm.value.area = res.data.province
    if(res.data.city) {
      projectForm.value.area = res.data.province + '-' + res.data.city
      if(res.data.county){
        projectForm.value.area = res.data.province + '-' + res.data.city + '-' + res.data.county
      }
    }
  })
}

const getList = () => {
  loading.value = true
  getAll({pmId: route.query.projectId, page: page.value, rows: rows.value}).then(res => {
    dataList.value = res.data.rows
    total.value = res.data.total
    loading.value = false
  })
}

const goTreeDetailForm = (row) => {
  router.push({ name: 'dataLoaderSubject', query: { id: row.id, name: row.name } })
}

watch(route, () => {
  if (route.name == 'dataLoaderProject' && route.query.projectId) {
    getProject()
    getList()
  }
}, { immediate: true })
</script>
<style scoped lang="scss">
:deep(.el-card__header) {
  background: #e5ebf7;
  h2{
    font-weight: bold;
  }
}
</style>